<template>
    <view class="page bgf8" :style="{'--color': color}">
        <status-bar title='未预约订单'></status-bar>
        <view class="padding20-30 bgwhite m-bot20" v-for="(item,index) in list" :key="index">
            <view class="d-flex a-center m-bot10">
                <view class="flex-1 size28 color_33">单号: {{ item.order_code }}</view>
                <view class="btn flexac thmeBg white" @click="dispatch(item)">派单</view>
            </view>
            <view class="color_33 m-bot10">
                <text class="size26 m-right10">{{ item.uname }}</text>
                <text>{{ item.utel }}</text>
            </view>
            <view class="color_99 m-bot10" v-if="item.address">{{ item.address }}</view>
            <view class="color_99">支付时间：{{ item.pay_date }}</view>
        </view>

        <empty v-if="noData" cat='3' msg='暂无相关的订单~'></empty>

        <u-popup :show="show" :round="10" @close="cancel">
            <view class="botPop">
                <view class="padding30 bot d-flex a-center">
                    <view class="title">安装员</view>
                    <picker class="flex-1" :range="staffList" range-key="name" @change="staffChange">
                        <view><input v-model="staff.name" placeholder="请选择" disabled /></view>
                    </picker>
                </view>
                <view class="padding30 bot d-flex a-center">
                    <view class="title">安装时间</view>
                    <timepicker showType="yearToMinute" @btnConfirm="btnConfirm">
                        <view><input v-model="reservation_time" placeholder="请选择" disabled /></view>
                    </timepicker>
                </view>
                <view class="padding30 bot d-flex">
                    <view class="title">安装地点</view>
                    <view class="flex-1">
                        <view class="d-flex m-bot30" @click="locate">
                            <view class="flex-1">{{ Division1 ? `${Division1}/${Division2}/${Division3}` : '请选择省/市/区' }}</view>
                            <view class="thmeColor">
                                <text class="iconfont icon-dingwei"></text>
                                <text class="size28 m-left4">定位</text>
                            </view>
                        </view>
                        <picker class="m-bot30" :range="street" range-key="RegionName" @change="streetChange">
                            <view>{{ Division4 || '请选择街道' }}</view>
                        </picker>
                        <textarea class="width" v-model="Division5" placeholder="请输入详细地址" :maxlength="-1" auto-height disable-default-padding />
                    </view>
                </view>
                <view class="padding30 bot d-flex">
                    <view class="title">安装备注</view>
                    <textarea class="flex-1" v-model="res_remarks" placeholder="请输入安装注意事项" :maxlength="-1" auto-height disable-default-padding />
                </view>
                <view class="d-flex j-se">
                    <view class="bot_btn flexac bgEA color_99" @click="cancel">取消</view>
                    <view class="bot_btn flexac thmeBg white" @click="submit">确定派单</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    import timepicker from '@/components/time-picker.vue'
    export default {
        data() {
            return {
                store_id: '',
                list: [],
                noData: false,
                show: false,
                pageData: '', // 主动指派的订单
                staffList: [],
                staff: '',
                reservation_time: '',
                res_remarks: '',
                // 地址
                pointx: '',
                pointy: '',
                Division1: '', // 省
                Division2: '', // 市
                Division3: '', // 区
                Division4: '', // 街道
                Division5: '', // 详细地址
                // 街道数据
                street: []
            }
        },
        computed: {
            ...mapState(['color', 'tdkey', 'position'])
        },
        components: {
            timepicker
        },
        onLoad(e) {
            if(e.store_id) this.store_id = e.store_id
            this.getList()
            this.getStaff()
        },
        methods: {
            getList() {
                this.$showLoading('')
                this.$http.post({
                    url: '/dispatch/getNotDispatchOrder',
                    data: {
                        store_id: this.store_id
                    }
                }).then(res => {
                    this.$hideLoading()
                    if(res.code != 100) return this.$Toast(res.msg)
                    this.list = res.data || []
                    if(!this.list.length) this.noData = true
                })
            },
            getStaff() {
                this.$http.post({
                    url: '/dispatch/getAllStaffList2'
                }).then(res => {
                    this.staffList = res.data || []
                })
            },
            dispatch(item) {
                this.pageData = item
                this.Division5 = item.address || ''
                this.geocoder(item.longitude, item.latitude)
                this.show = true
            },
            staffChange(e) {
                let index = e.detail.value
                this.staff = this.staffList[index]
            },
            btnConfirm(e) {
                this.reservation_time = e.key
            },
            // 主动派单
            submit() {
                if(!this.staff) return this.$Toast('请选择员工')
                if(!this.reservation_time) return this.$Toast('请选择安装时间')
                if(!this.Division1) return this.$Toast('请定位省市区')
                if(!this.Division4) return this.$Toast('请选择街道')
                if(!this.Division5) return this.$Toast('安装地点不能为空') 
                this.$http.post({
                    url: '/dispatch/xcxConfigOrderToStaff2',
                    data: {
                        store_id: this.store_id,
                        order_id: this.pageData.order_id,
                        staff_id: this.staff.staff_id,
                        reservation_time: this.reservation_time  + ':00',
                        res_remarks: this.res_remarks,
                        pointx: this.pointx,
                        pointy: this.pointy,
                        Division1: this.Division1,
                        Division2: this.Division2,
                        Division3: this.Division3,
                        Division4: this.Division4,
                        Division5: this.Division5
                    }
                }).then(res => {
                    this.$Toast(res.msg)
                    if(res.code != 100) return
                    this.cancel()
                    setTimeout(() => {
                        this.getList()
                    }, 1000)
                })
            },
            cancel() {
                this.show = false
                this.staff = ''
                this.reservation_time = ''
                this.res_remarks = ''
                this.Division1 = ''
                this.Division2 = ''
                this.Division3 = ''
                this.Division4 = ''
            },
            // 打开地图选择位置
            locate() {
                uni.chooseLocation({
                    latitude: this.pageData.latitude || this.position.latitude,
                    longitude: this.pageData.longitude || this.position.longitude,
                    success: res => {
                        console.log(res)
                        let i = res.address.indexOf('区')
                        this.Division5 = res.address.slice(i + 1) + res.name
                        this.geocoder(res.longitude, res.latitude)
                    }
                })
            },
            // 天地图-逆地理解析
            geocoder(lon, lat) {
                this.pointx = lon || ''
                this.pointy = lat || ''
                if(!lon) return
                this.$showLoading('')
                this.$http.get_ds({
                    url: '/geocoder',
                    data: {
                        postStr: { lon, lat, ver: 1 },
                        type: 'geocode',
                        tk: this.tdkey
                    }
                }).then(res => {
                    this.$hideLoading()
                    if(res.status != 0) return
                    let result = res.result.addressComponent
                    this.Division1 = result.province
                    this.Division2 = result.city || result.province
                    this.Division3 = result.county
                    this.Division4 = result.town
                    // 取后6位
                    if(result.county_code) this.getDivision(result.county_code.slice(-6))
                })
            },
            // 查询街道
            getDivision(regioncode) {
                this.$showLoading('')
                this.$http.post({
                    url: '/singleSaleApi/getAdministrativeDivision',
                    data: {
                        regioncode: `${regioncode}00`
                    }
                }).then(res => {
                    this.$hideLoading()
                    this.street = res.data || []
                    let result = this.street.find(item => item.RegionName == this.Division4)
                    if(!result) this.Division4 = ''
                })
            },
            streetChange(e) {
                let current = this.street[e.detail.value]
                this.Division4 = current.RegionName
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .btn {
        width: 128rpx;
        height: 56rpx;
        border-radius: 56rpx;
    }
    .botPop {
        view, input {
           font-size: 28rpx; 
        }
        .title {
            width: 120rpx;
            text-align-last: justify;
            color: #949495;
            margin-right: 30rpx;
        }
        .bot_btn {
            width: 240rpx;
            height: 76rpx;
            border-radius: 10rpx;
            letter-spacing: 6rpx;
            margin: 60rpx 0 30rpx 0;
        }
    }
</style>